<template>
	<view class="memory-island-detail">
		<view class="top-background"  :style="'background-image: url('+islandInfo.background+');'">
			<view class="mask"></view>
		</view>

		<view class="info">
			<view class="back-arrow">
				<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="left" size="30" color="#ffffff">
				</uni-icons>
				<uni-icons style="margin-right: 40rpx;" type="compose" size="30" color="#ffffff" @click="toIslandManage('info')"></uni-icons>
			</view>

			<view class="name">
				{{islandInfo.name}}
			</view>
			<view class="description">
				{{islandInfo.description}}
			</view>
			<view class="description">
				共 {{islandInfo.userCount}} 人
			</view>
			<view class="posts" style="min-height: 1200rpx;">
				<view class="tabs">
					<view v-for="(item,index) in postTypes">
						<view @click="changeTab(index)" class="tab"
							:class="index == currentTypeIndex ? 'tab-current': '' ">
							<view>{{item}}</view>
							<view v-if="index == currentTypeIndex" class="tab-line"></view>
						</view>
					</view>
				</view>

				<view v-if="currentTypeIndex == 0" class="index">

				</view>

				<view v-if="currentTypeIndex == 1" class="audits">
					<view class="audit" v-for="(item,index) in auditList" @click="toAuditDetail(item)"
						:style="{'background-color' : item.isReaded ? '#eaeaea' : ''}">
						<view style="display: flex;flex-direction: column;">
							<view class="title">{{item.reportReason}}</view>
							<view class="type">类型：{{item.contentType}}</view>
							<view class="nickname">发起人：{{item.nickname}}</view>
						</view>
					
						<uni-icons style="margin-left: 30rpx;" type="right" size="20" color="#eaeaea"></uni-icons>
					</view>
				</view>

				<view v-if="currentTypeIndex == 2" class="messages">
					<view v-if="messages.length===0" style="padding: 30rpx;text-align: center;font-size: 34rpx;">
						暂时还没有私信
					</view>
					<view class="message" v-for="(item,index) in messages"
						:style="{'background-color' : item.isReaded ? '#d3d3d3' : ''}">
						<view class="message-top">
							<view style="display: flex;flex-direction: row;align-items: center;">
								<view class="avatar">
									<image mode="aspectFill" :src="item.avatar"></image>
								</view>
								<view style="margin-left: 20rpx;">{{item.nickname}}</view>
							</view>
							<view class="date">昨天8:03</view>
						</view>
						<view class="message-content">{{item.content}}</view>
					</view>
				</view>

				<view v-if="currentTypeIndex == 3" class="manage">
					<view class="manage-buttons">
						<view class="manage-button" @click="toIslandManage('user')">
							<view class="icon"></view>
							<view class="text">用户管理</view>
						</view>
						<view class="manage-button" @click="toIslandManage('post')">
							<view class="icon"></view>
							<view class="text">内容管理</view>
						</view>
						<view class="manage-button" @click="toIslandManage('comment')">
							<view class="icon"></view>
							<view class="text">评论管理</view>
						</view>
						<view class="manage-button" @click="toTeamManage()">
							<view class="icon"></view>
							<view class="text">团队管理</view>
						</view>
					</view>


					<view class="todos">

						<view class="todos-title">
							<view>近期待办</view>
						</view>

						<view class="todo" @touchstart="touchstartX" @tap="resetX" @touchmove="touchmoveX"
							@touchend="touchendX" :animation="currentIndex === index ? animation : ''"
							:data-index="index" v-for="(item, index) in todoList" :key="item.id">
							<view class="todo-card"
								:style="'background-color: ' + (item.teamTodoId == null ? '' : 'rgb(212,234,253)') + ';'">
								<checkbox-group class="todo-check" @change="finishTodo(item.id)" :data-todoId="item.id">
									<checkbox value="checked"></checkbox>
								</checkbox-group>

								<view class="todo-info" style="width: 100%">
									<view class="todo-title">{{ item.title }}</view>
									<view
										style="display: flex; flex-direction: column; justify-content: space-between; margin-top: 8rpx">
										<view class="todo-brief" v-if="item.gmtEnd != null">
											截止时间：{{ item.gmtEnd ? item.gmtEnd : '无截止日期' }}</view>
										<view class="todo-brief" v-if="item.monitorId != null">负责人：{{ item.monitorName}}
										</view>
									</view>
								</view>

								<view class="todo-btns">
									<view class="detail" @tap="showTodoEdit(item)">修改</view>
									<view class="delete" @tap="deleteTodo()">删除</view>
								</view>
							</view>
						</view>

					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	let movedistance = 0;
	
	export default {
		data() {
			return {
				islandInfo: {},


				postTypes: ["概览", "举报", "私信", "管理"],
				currentTypeIndex: 0,
				auditList: [],
				messages: [{
						id: "",
						content: "近几年青少年抑郁者迅速增多，许多悲观论调也流传甚广，不知道为什么，我从最初会心，我从最初会",
						nickname: "带着脑子去流浪",
						avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
						isReaded: false,
						date: null
					},
					{
						id: "",
						content: "第三章第六节的内容补充完善",
						nickname: "带着脑子去流浪",
						avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
						isReaded: false,
						date: null
					},
					{
						id: "",
						content: "第三章第六节的内容补充完善",
						nickname: "带着脑子去流浪",
						avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
						isReaded: true,
						date: null
					},
					{
						id: "",
						content: "第三章第六节的内容补充完善",
						nickname: "带着脑子去流浪",
						avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
						isReaded: true,
						date: null
					}
				],

				currentIndex: '',
				animation: '',
				todoList: [{
						id: "1",
						title: "团队待办",
						gmtEnd: "",
						monitorId: "",
						monitorName: "带着脑子去流浪"
					},
					{
						id: "2",
						title: "团队待办",
						gmtEnd: "",
						monitorId: "",
						monitorName: "带着脑子去流浪"
					}
				],
				todoInput: {
					title: "",
					data: null
				},
				today: null,
				tags: [{
						name: "今日"
					},
					{
						name: "重要"
					}
				],
				chosenTagsIndex: [false, false],

			}
		},
		onLoad(options) {
			if(options.islandId){
				this.islandInfo.id = options.islandId
				this.getIslandManageInfo()
				this.pageReportOrderByTime()
			}
		},
		methods: {
			getIslandManageInfo(islandId) {
				var that = this
				this.$api.getIslandManageInfo({
					islandId: this.islandInfo.id
				}).then(res => {
					that.islandInfo = res.data;
				})
			},
			
			
			pageReportOrderByTime() {
				this.$api.pageReport({
					pageNow: 1,
					pageSize: 20,
					range: 2,
					sourceId: this.islandInfo.id
				}).then(res => {
					this.auditList = res.data.rows;
				})
			},
			
			changeTab(index) {
				this.currentTypeIndex = index
			},
			
			
			
			showTodoEdit(item) {
				if (item == null) {
					this.todoInput = {
						title: "",
						data: null
					}
				} else {
					this.todoInput = item
				}
			
				this.$refs.todoEdit.open('bottom')
			},
			
			
			
			
			
			addTodo: function() {
				this.$api.addTodo({
					title: this.todoInput.title,
					date: this.todoInput.date,
					tagIds: this.indexToTagIds()
				}).then(res => {
					this.getMyTodayTodoList()
				})
			},
			deleteTodo: function(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该待办吗',
					success(res) {
						if (res.confirm) {
							that.$api.deleteTodo({
								id
							}).then(res => {
								that.getMyTodayTodoList()
							})
						}
					}
				});
			},
			updateTodo: function() {
				this.$api.updateTodo({
					date: this.todoInput.date,
					title: this.todoInput.title,
					id: this.todoInput.id,
					tagIds: this.indexToTagIds()
				}).then(res => {
					this.getMyTodayTodoList()
				})
			},
			finishTodo: function(id) {
				this.$api.finishTodo({
					id
				}).then(res => {
					uni.showToast({
						title: '已完成',
						duration: 500
					});
					this.getMyTodayTodoList()
				})
			},
			// 移除今日待办
			removeTodoFromToday: function(id) {
				this.$api.removeTodoFromToday({
					id
				}).then(res => {
					this.getMyTodayTodoList()
				})
			},
			
			
			
			
			// 标签选中标记数组 -> id数组
			indexToTagIds: function() {
				let ids = [];
			
				for (let i = 0; i < this.chosenTagsIndex.length; i++) {
					if (this.chosenTagsIndex[i]) {
						ids.push(this.tags[i].id);
					}
				}
			
				return ids;
			},
			tagIdsToIndex: function(ids) {
				let chosenTagsIndex = [];
				for (let i = 0; i < this.tags.length; i++) {
					for (let id of ids) {
						if (id === this.tags[i].id) {
							chosenTagsIndex.push(true);
							break;
						}
					}
					if (chosenTagsIndex[i] != true) {
						chosenTagsIndex.push(false);
					}
				}
				this.chosenTagsIndex = chosenTagsIndex
			},
			
			
			
			
			changeChosenTag: function(chosenindex) {
				console.log(chosenindex)
				this.chosenTagsIndex[chosenindex] = !this.chosenTagsIndex[chosenindex];
				this.$forceUpdate()
			},
			
			
			
			toAuditDetail(audit) {
				if (audit.contentType == '浪屿-帖子') {
					uni.navigateTo({
						url: "/pages_self/wind/manage/island/island-post-manage?islandId="
						+this.islandInfo.id+"&linkId="
						+audit.linkId+"&auditId="
						+audit.id
					})
				} else if (audit.contentType == '浪屿-回复') {
					uni.navigateTo({
						url: "/pages_self/wind/manage/island/island-comment-manage?islandId="
						+this.islandInfo.id+"&linkId="
						+audit.linkId+"&auditId="
						+audit.id
					})
				}
			},
			
			toIslandManage(name){
				uni.navigateTo({
					url:"/pages_self/wind/manage/island/island-"+name+"-manage?islandId="+this.islandInfo.id
				})
			},
			
			toTeamManage(){
				uni.navigateTo({
					url:"/pages_self/wind/manage/team/team-manage?teamId="+this.islandInfo.teamId
				})
			},
			
			toBackPage() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			toAddMemory() {
				uni.navigateTo({
					url: "/pages_being/island/memory-create"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.memory-island-detail {


		.top-background {
			position: fixed;
			z-index: 1;
		
			width: 100%;
			height: 450rpx;
			
			background-repeat: no-repeat;
			background-size: cover;
			
			
			.mask{
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0rpx;
				background: linear-gradient(to top, rgba(0, 0, 0, 0.5)0%, rgba(67, 72, 92, 0)100%);
				z-index: 2;
			}
		}

		.info {
			position: relative;
			z-index: 2;

			display: flex;
			flex-direction: column;

			.back-arrow {
				width: 100%;
				margin-top: 60rpx;
				height: 40rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}


			.name {
				color: white;
				font-size: 40rpx;
				margin-top: 140rpx;
				margin-left: 40rpx;
			}

			.description {
				margin-top: 10rpx;
				margin-left: 40rpx;
				font-size: 28rpx;
				color: #e3e3e3;
			}

			.posts {
				width: 100%;
				background-color: #F9F9F9;
				border-radius: 40rpx;
				margin-top: 20rpx;


				.tabs {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 40rpx;
					margin-bottom: 20rpx;
					// border-bottom: solid thin #d3d3d3;

					.tab {
						margin-left: 50rpx;
						color: gray;
						height: 65rpx;

						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
					}

					.tab-current {
						color: #2c2c2c;
						font-weight: bold;
					}

					.tab-line {
						width: 40rpx;
						height: 7rpx;
						border-radius: 5rpx;
						background-color: #2c2c2c;
					}


				}

				.index {}

				.audits {
					display: flex;
					flex-direction: column;
					width: 670rpx;
					margin-left: 20px;

					.audit {
						display: flex;
						flex-direction: row;
						margin-bottom: 30rpx;
						justify-content: space-between;
						align-items: center;
						padding: 30rpx;
						border-radius: 20rpx;
						background-color: #FFFFFF;
					
						.title {
							font-weight: bold;
						}
					
						.type {
							font-size: 28rpx;
							margin-top: 20rpx;
							color: #9d9d9d;
						}
					
						.nickname {
							font-size: 28rpx;
							margin-top: 5rpx;
							color: #9d9d9d;
						}
					
					}
				}

				.messages {
					display: flex;
					flex-direction: column;
					width: 670rpx;
					margin-left: 20px;


					.message {
						display: flex;
						flex-direction: column;
						margin-top: 20rpx;
						padding: 30rpx;
						border-radius: 10rpx;
						box-shadow: 1px 1px 8px 2px #e9eee9;

						.message-top {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: flex-start;

							.avatar {
								height: 60rpx;
								width: 60rpx;
								border-radius: 50%;
								overflow: hidden;
							}

							.date {
								font-size: 28rpx;
								color: gray;
							}

						}

						.message-content {
							margin-top: 20rpx;

							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 2;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}
					}
				}



				.manage {
					display: flex;
					flex-direction: column;

					.manage-buttons {
						width: 670rpx;
						margin-left: 20px;

						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin-top: 10rpx;

						.manage-button {
							width: 130rpx;
							height: 175rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;

							.icon {
								width: 130rpx;
								height: 130rpx;
								background-color: #FFFFFF;
								border-radius: 20rpx;
							}

							.text {
								font-size: 28rpx;
							}



						}
					}

					.todos {
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;
						z-index: 2;
						width: 670rpx;
						margin-left: 40rpx;




						.todos-title {
							width: 670rpx;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;


							font-size: 36rpx;
							margin: 40rpx 0;
							font-weight: bold;
						}

						.todo {

							width: 690rpx;
							box-shadow: 0px 0px 4px 2px #f5f7f5;
							padding: 20rpx 0;
							border-radius: 25rpx;
							background-color: #FFFFFF;
							margin-bottom: 30rpx;


							.todo-card {
								display: flex;
								align-items: center;


								.todo-check {
									margin: 0 20rpx;
								}

								.todo-info {
									display: block;
								}

								.todo-title {
									font-size: 32rpx;
								}

								.todo-brief {
									font-size: 24rpx;
									color: gray
								}

								/* 待办滑动操作按钮 */
								.todo-btns {
									position: absolute;
									right: -310rpx;

									display: flex;
									justify-content: left;
									align-items: center;

									box-sizing: border-box;
									width: 300rpx;
									height: 120rpx;
									padding-left: 40rpx;

									text-align: center;
									color: #fff;
									line-height: 120rpx;
								}

								.todo-btns view {
									width: 80rpx;
									height: 120rpx;
									font-size: 28rpx;
									margin-right: 20rpx;
									border-radius: 20rpx;
								}

								.todo-btns .detail {
									background-color: #97C5FC;
								}
							}

							.todo-btns .delete {
								background-color: #f10e0e;
							}
						}
					}

				}
			}

		}

		.page-btns {
			display: flex;
			position: fixed;
			right: 100rpx;
			bottom: 100rpx;
			z-index: 10;
		}
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
